<template>
	<view>
		<view class="depositBox" v-if="depositRefundInfo.depositInfoVo != null" @click="depositRefund(1)">
			<view>
				<text>车辆押金退款</text>
				<text>退款金额: ¥{{depositRefundInfo.depositInfoVo.refundAmount|filterNull}}</text>
				<text>退款时间: {{depositRefundInfo.depositInfoVo.refundTime|filterNull}}</text>
				<text>退款账户: {{depositRefundInfo.depositInfoVo.refundAccount|filterNullt}}</text>
				<text>退款方式: {{depositRefundInfo.depositInfoVo.refundWay|filterNull}}</text>
			</view>

			<u-icon class="arrow" name="arrow-right"></u-icon>
		</view>

		<view class="depositBox" v-if="depositRefundInfo.illegalDepositInfoVo != null" @click="depositRefund(2)">
			<view>
				<text>违章押金退款</text>
				<text>退款金额: ¥{{depositRefundInfo.illegalDepositInfoVo.refundAmount|filterNull}}</text>
				<text>退款时间: {{depositRefundInfo.illegalDepositInfoVo.refundTime|filterNull}}</text>
				<text>退款账户: {{depositRefundInfo.illegalDepositInfoVo.refundAccount|filterNull}}</text>
				<text>退款方式: {{depositRefundInfo.illegalDepositInfoVo.refundWay|filterNull}}</text>
			</view>
			<u-icon class="arrow" name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		apiOrderDepositRefund,
		luxuryOrderDepositRefund
	} from '@/api/order-api.js'
	export default {
		data() {
			return {
				orderNo: '',
				depositRefundInfo: {},
				type: 1
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.type = op.type;
			this.getDepositInfo();
		},
		methods: {
			getDepositInfo() {

				if (this.type == 1) { //短租
					apiOrderDepositRefund({
						type: this.type,
						orderNo: this.orderNo
					}).then(res => {
						this.depositRefundInfo = res.data;
					})
				} else if (this.type == 3) { //豪车
					luxuryOrderDepositRefund({
						type: this.type,
						orderNo: this.orderNo
					}).then(res => {
						this.depositRefundInfo = res.data;
					})
				}

			},
			depositRefund(type) {
				uni.navigateTo({
					url: './shortOrder-depositRefundDetail?orderNo=' + this.orderNo + '&type=' + type + '&bizType='+this.type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.depositBox {
		margin: 20upx;
		padding: 28upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: $bg-white-color;
		border-radius: 16upx;

		text {
			color: $text-color-66;
			font-size: 22upx;
			margin-bottom: 20upx;
			display: block;
		}

		text:nth-child(1) {
			color: $text-color-33;
			font-size: 28upx;
			font-weight: bold;
			margin-bottom: 30upx;
		}
	}
</style>
